<template>
<view class="userpost">
  <view class="userpost-index">
    <view class="userpost-item">
      <view class="userpost-top">
        <radio :checked="postItem.isSelected" color="#C00000" v-if="showRadio" @click="radioClickHandler"></radio>
            <!-- 活动开始时间 -->
          <text class="left-text">{{postItem.beginTime}}</text>
          <text style="color: #58C66A;" v-if="postItem.num === postItem.currentNum" class="right-text">组队成功</text>
          <text style="color: #CD1225;" v-else-if="postItem.isOverdue === 1" class="right-text">组队失败</text>
          <text style="color: #FF7418;" v-else="postItem" class="right-text">组队中</text>
      </view>
      <view class="userpost-body" @click="gotoItem">
        <!-- 左侧图片 -->
        <view class="userpost-body-left">
          <image src="https://s2.loli.net/2022/05/05/PAlOQUiWh8oTcyb.png" mode="" v-if="postItem.catId === 0"></image>
          <image src="https://s2.loli.net/2022/05/05/fbgDqN9kpUTSY3l.png" mode="" v-else-if="postItem.catId === 1"></image>
          <image src="https://s2.loli.net/2022/05/05/5VUfRudITWj7ow2.png" mode="" v-else-if="postItem.catId === 2"></image>
        </view>
        <!-- 右侧区域 -->
        <view class="userpost-body-right">
          <view class="userpost-body-top">
            <!-- 标题 -->
            <view class="userpost-bodyitemright">
              <text class="title-text">{{postItem.title}}</text>
              <text class="content-text">{{postItem.content.replace(/[\r\n]/g,"")}}</text>
            </view>
            <!-- 人数 -->
            <view class="userpost-bodyitemright-item">
              <image src="https://s2.loli.net/2022/05/07/IdUkV2A3j7xFiYr.png" mode="" class="userpost-bodyitemright-image"></image>
              <text class="userpost-bodyitemright-text">{{postItem.num-postItem.currentNum == 0 ? '人满' : postItem.num-postItem.currentNum}}</text>
            </view>
          </view>
          <!-- 参与按钮 -->
          <view class="userpost-button">
            <text v-if="uid !== uuid">立即参与</text>
            <text v-else>查看详情</text>
          </view>
        </view>
      </view>      
    </view>
  </view>
</view>
</template>

<script>
  export default {
    name:"user-task",
    data() {
      return {
        uuid: uni.getStorageSync('userId')
      };
    },
    props: {
      postItem: {
        type: Object,
        default: {}
      },
      uid: {
        // type: Number,
        default: 0
      },
      showRadio: {
        type: Boolean,
        default: false
      }
    },
    methods:{
      radioClickHandler() {
        this.$emit('radio-change',{
          isSelected: !this.postItem.isSelected,
          serialNumber: this.postItem.serialNumber
        })
      },
      gotoItem() {
        this.$emit('goto-item',this.postItem.serialNumber)
      }
    },
    mounted() {
    }
  }
</script>

<style lang="scss">
  .userpost-index {
    background-color: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #FFFFFF;
    margin: 30rpx 20rpx 0 20rpx;
    .userpost-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .userpost-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 5px;
        border-bottom: 1px solid #FFFFFF;
        .left-text {
          font-size: 14px;
          color: #7A7A7A;
        }
      }
      .userpost-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 124px;
        text {
          font-size: 14px;
        }
        .userpost-body-left {
          image {
            margin: 0 10px;
            width: 80px;
            height: 80px;
          }
        }
        .userpost-body-right {
            height: 100%;
            position: relative;
            width: 250px;
            .userpost-body-top {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 20px 10px;
              margin-left: 0;
              .userpost-bodyitemright {
                display: flex;
                flex-direction: column;
                align-items: center;
                // width: 100px;
                 margin-left: 10px;
                 text {
                   display: inline-block;
                   width: 140px;
                   //省略...显示
                   white-space: nowrap;
                   overflow: hidden;
                   text-overflow: ellipsis; 
                 }
                 .title-text {
                   font-size: 17px;
                   font-weight: 700;
                 }
                 .content-text {
                   font-size: 13px;
                   color: #7A7A7A;
                 }
              }
              .userpost-bodyitemright-item {
                display: flex;
                justify-content: center;
                align-items: center;
                .userpost-bodyitemright-image {
                  width: 25px;
                  height: 25px;
                }
                .userpost-bodyitemright-text {
                  // display: inline-block;
                  // // width: 140px;
                  // //省略...显示
                  // white-space: nowrap;
                  // overflow: hidden;
                  // text-overflow: ellipsis;
                    display: inline-block;
                    margin-right: 20px;
                    font-size: 14px;
                }
              }
            }  
            .userpost-button {
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              padding: 6px 20px;
              right: 20px;
              buttom: 7px;
              background-image: linear-gradient(to right , #F2D883, #F5D155);
              border: 1px solid #F2DB4B;
              border-radius: 5px;
              // color: #FFFFFF;
            }
        }
      }
    }
  }
</style>
